<template>
  <div class="carmain">
    <!-- 
    cardInfo.status： 审核状态（ 1 ：待审核，  2：审核通过  3：审核不通过）
    - 如果没有审核通过时，显示对应的状态文本
    cardInfo.secondaryCardAllocationType : 子卡的分配方式
      1：共享主卡方式  ： 显示主卡的核销二维码
      2：手动分配模式  ： 显示解绑按钮，可以点击解绑与主卡的关联
   -->

    <!-- 显示子卡信息 -->
    <div class="carlist" v-if="cardInfo.status">
      <div class="carlist-item" v-if="cardInfo.status === 2">
        <div class="carlist-item-title">
          <div class="div1">
            <span class="span1"> 车队名称：</span>
            <span class="carlist-item-teamName">
              {{ cardInfo.fleetName }}
            </span>
          </div>

          <div
            @click="scanShow = true"
            v-if="cardInfo.secondaryCardAllocationType === 1"
          >
            <img src="../../../static/team/scancode.png" />
          </div>
          <span
            class="unbind"
            @click="handleUnbind(cardInfo)"
            v-if="cardInfo.secondaryCardAllocationType === 2"
            >解绑</span
          >
        </div>
        <!-- 金额 -->
        <div class="carlist-item-amt">
          ￥
          {{
            cardInfo.secondaryCardAllocationType === 1
              ? cardInfo.balance
              : cardInfo.balanceSub
          }}
        </div>
        <!-- 卡号 -->
        <div class="carlist-item-cardNo">
          NO:
          {{ cardInfo.cardNumberSub }}
        </div>
      </div>

      <div class="auiting" v-show="cardInfo.status === 1">
        <p>申请加入车队正在审核中，请耐心等待~</p>
        <p>尝试联系 <span>主卡人</span> ，加快审核进度</p>
      </div>

      <!--核销码：  审核通过时，显示二维码。  1、 共享主卡时，显示主卡的核销码   2、手动分配时，显示子卡自己的核销码 -->
      <van-overlay :show="scanShow" @click.stop="scanShow = false">
        <div class="scan_wrapper">
          <div class="block">
            <div class="title">核销码</div>
            <TeamCardQrCode :text="scanCodeText" name="二维码" class="qr">
              <div style="text-align: center">
                请向加油员出示车队卡核销码
              </div>
            </TeamCardQrCode>
          </div>
        </div>
      </van-overlay>

      <!-- 核销按钮 -->
      <div class="hexiao" v-if="cardInfo.status === 2">
        <van-button type="info" size="small" @click="scanShow = true">
          核销码
        </van-button>
      </div>
    </div>

    <div class="carlist" v-else>
      <!-- 显示主卡的数据 -->
      <div class="carlist-item">
        <div class="carlist-item-title">
          <div class="div1">
            <span class="span1"> 车队名称：</span>
            <span class="carlist-item-teamName">
              {{ cardInfo.fleetName }}
            </span>
          </div>

          <div @click="scanShow = true">
            <img src="../../../static/team/scancode.png" />
          </div>
        </div>
        <!-- 金额 -->
        <div class="carlist-item-amt">
          ￥
          {{ cardInfo.balance }}
        </div>
        <!-- 卡号 -->
        <div class="carlist-item-cardNo">
          NO:
          {{ cardInfo.cardNumber }}
        </div>
      </div>

      <!--核销码：  审核通过时，显示二维码。  1、 共享主卡时，显示主卡的核销码   2、手动分配时，显示子卡自己的核销码 -->
      <van-overlay :show="scanShow" @click.stop="scanShow = false">
        <div class="scan_wrapper">
          <div class="block">
            <div class="title">核销码</div>
            <TeamCardQrCode :text="scanCodeText" name="二维码" class="qr">
              <div style="text-align: center">
                请向加油员出示车队卡核销码
              </div>
            </TeamCardQrCode>
          </div>
        </div>
      </van-overlay>

      <!-- 核销按钮 -->
      <div class="hexiao">
        <van-button type="info" size="small" @click="scanShow = true">
          核销码
        </van-button>
      </div>
    </div>

    <!-- 申请不通过 -->
    <div class="audit_fail" v-if="cardInfo.status === 3">
      <p>呜~ 您的审核不通过记录~</p>
      <p>车队名称： {{ cardInfo.fleetName }}</p>
      <p>车队卡号：{{ cardInfo.cardNumber }}</p>
      <p>
        请
        <nuxt-link :to="{ path: `/${this.enterpriseId}/car/search` }">
          重新申请
        </nuxt-link>
        或加入其他车队
      </p>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Button, Dialog, Field, Overlay, Toast } from "vant";
import TeamCardQrCode from "@/components/teamCardQrCode.vue";

Vue.use(Button);
Vue.use(Dialog);
Vue.use(Field);
Vue.use(Overlay);
Vue.use(Toast);
export default {
  name: "CardList",
  head() {
    return {
      title: "我的车队"
    };
  },
  props: {
    cardInfo: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    TeamCardQrCode
  },
  data() {
    return {
      parentCardInfo: {}, //  车队卡id
      scanShow: false,
      scanCodeText: "", // 二维码携带的参数  cdk_卡号_entertime_时间戳,
      cardNo: "",
      enterTime: ""
    };
  },
  watch: {
    // 监控二维码的展示情况： 关闭二维码时，清空定时器
    scanShow(val) {
      if (!val) {
        if (this.timer) clearInterval(this.timer);
      } else {
        // 拼接二维码参数
        // status ：子卡状态(1:待审核 2:审核通过 3:审核不通过)  只有子卡才会有status字段，主卡是没有的
        // secondaryCardAllocationType ： 分配方式 1共享  2 手动分配
        let cardNo = "";
        let enterTime = "";
        cardNo = this.cardInfo.cardNumberSub
          ? this.cardInfo.cardNumberSub
          : this.cardInfo.cardNumber;
        enterTime = new Date().getTime();
        this.cardNo = cardNo;
        this.enterTime = enterTime;
        this.scanCodeText = "cdk_" + cardNo + "_entertime_" + enterTime;

        // 原来的逻辑，有根据子卡分配方式，传卡号的
        // if (this.cardInfo.status) {
        //   cardNo =
        //     this.cardInfo.secondaryCardAllocationType === 1
        //       ? this.cardInfo.cardNumber
        //       : this.cardInfo.cardNumberSub;
        //   enterTime = new Date().getTime();
        //   this.cardNo = cardNo;
        //   this.enterTime = enterTime;
        //   this.scanCodeText = "cdk_" + cardNo + "_entertime_" + enterTime;
        // } else {
        //   // 车队主卡
        //   cardNo = this.cardInfo.cardNumber;
        //   enterTime = new Date().getTime();
        //   this.cardNo = cardNo;
        //   this.enterTime = enterTime;
        //   this.scanCodeText = "cdk_" + cardNo + "_entertime_" + enterTime;
        // }

        this.getPayStatus();
      }
    }
  },
  methods: {
    // 展示核销码
    getPayStatus() {
      const _this = this;
      this.scanShow = true;
      // 轮询查询支付结果
      this.timer = setInterval(async () => {
        console.log("支付了吗");
        console.log(this.scanCodeText, "二维码参数");
        let res = await this.$axios.$get(
          `/getCdkOrderResult/${this.scanCodeText}`
        );
        if (res.data.result === "HAVE_PAID") {
          console.log("支付成功,直接跳转支付成功页面", res);
          clearInterval(this.timer);
          this.$router.replace({
            path: `/${_this.enterpriseId}/fuel/success?ordNo=${res.data.orderNo}`
          });
        }
        // else {
        //   console.log("支付失败，提示支付失败");
        //   this.$router.replace({
        //     path: "/car/payStatus",
        //     query: {
        //       isSoncard:
        //         this.cardInfo.secondaryCardAllocationType === 1 ? false : true
        //     }
        //   });
        // }
      }, 3000);
    },
    // 解绑子卡
    async handleUnbind(cardInfo) {
      Dialog.confirm({
        message: "确定解绑吗，解绑后会删除该卡的数据且不可恢复"
      })
        .then(async () => {
          const res = await this.$axios.$delete(
            `/fleetCardSub/unbind/${cardInfo.id}`
          );
          Dialog.alert({
            message: res.message
          }).then(() => {
            this.$router.replace(`/${this.enterpriseId}/car`); // 跳转我的车队主页
            window.location.reload(); // 刷新页面
          });
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style scoped lang="scss">
.carlist {
  margin-top: 0.5rem;
  // 每一个车队卡item的样式
  .carlist-item {
    border: 1px solid #ddd;
    border-radius: 0.3rem;
    padding: 0.3rem;
    margin-bottom: 0.3rem;
    background-color: aliceblue;
    // background: linear-gradient(-45deg, #f59a23, #fff, #f59a23);
    // background-size: 300%;
    // animation: gradientBG 5s ease infinite;

    /* 动画，控制背景 background-position */
    @keyframes gradientBG {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
    // 卡的车队名称样式
    .carlist-item-title {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      font-size: 0.3rem;

      .div1 {
        width: 90%;
        display: flex;
        .span1 {
          display: block;
          width: 1.5rem;
        }
        .carlist-item-teamName {
          display: block;
          width: 3.5rem;
          text-align: justify;
        }
      }

      .carlist-item-join {
        color: #f59a23;
        display: block;
        width: 1.5rem;
      }
      .unbind {
        color: #999;
      }
    }

    // 卡的金额样式
    .carlist-item-amt {
      font-size: 0.4rem;
      font-weight: bold;
      margin: 0.5rem 0rem;
    }

    // 卡号样式
    .carlist-item-cardNo {
      text-align: right;
      font-size: 0.3rem;
    }
  }

  .auiting {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.35rem;
    span {
      color: blue;
    }
  }

  // 二维码
  .van-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    .scan_wrapper {
      background: #fff;
      padding: 0.5rem;
      text-align: center;
      .block {
        .title {
          font-size: 0.4rem;
          margin-bottom: 0.2rem;
        }
        .qr {
          font-size: 0.3rem;
        }
      }
    }
  }

  // 核销
  .hexiao {
    width: 100%;
    text-align: center;
    margin-top: 2rem;
    .van-button {
      padding: 0.4rem 1rem;
      font-size: 0.33rem;
      border-radius: 10px;
    }
  }
}

.audit_fail {
  text-align: center;
  font-size: 0.38rem;
  padding: 0.3rem;
}
</style>
